<template>
    <div>
        <mu-appbar style="width: 100%;position：absolute" color="primary" fixed>
        <mu-button icon slot="left">
            <mu-icon value="menu"></mu-icon>
        </mu-button>
        益多多
        <mu-button flat slot="right">
            <mu-icon size="20" value="notifications"></mu-icon>
        </mu-button>
        </mu-appbar>

        <div>
            <mu-carousel :active="active" class="carousel" hide-controls>
                <mu-icon value="arrow_back" slot="left"></mu-icon>
                <mu-icon value="arrow_forward" slot="right"></mu-icon>
                <mu-carousel-item  v-for="(act,index) in acts" :key="index"  @click.native="toDetail(index)" v-if="act.status==0">
                    <img :src="act.pic">
                </mu-carousel-item>
            </mu-carousel>
        </div>

        <mu-divider></mu-divider>

        <div>
            <mu-flex class="flex-wrapper" justify-content="start">
                <mu-flex class="flex-demo" justify-content="center" ><mu-icon size="48" value="account_balance" @click="tofind"></mu-icon></mu-flex>
                <mu-flex class="flex-demo" justify-content="center" @click="tomyacts"><mu-icon size="48" value="favorite"></mu-icon></mu-flex>
                <mu-flex class="flex-demo" justify-content="center" ><mu-icon size="48" value="face"></mu-icon></mu-flex>
                <mu-flex class="flex-demo" justify-content="center" ><mu-icon size="48" value="alarm"></mu-icon></mu-flex>
            </mu-flex>
            <mu-flex class="flex-wrapper-text" justify-content="center">
                <mu-flex class="flex-demo" justify-content="center" @click="tofind">活动预告</mu-flex>
                <mu-flex class="flex-demo" justify-content="center" @click="tomyacts">我的活动</mu-flex>
                <mu-flex class="flex-demo" justify-content="center" >组织认证</mu-flex>
                <mu-flex class="flex-demo" justify-content="center" >我的时长</mu-flex>
            </mu-flex>
            <mu-flex class="flex-wrapper" justify-content="start">
                <mu-flex class="flex-demo" justify-content="center" ><mu-icon size="48" value="brightness_high"  @click="toshare"></mu-icon></mu-flex>
                <mu-flex class="flex-demo" justify-content="center" ><mu-icon size="48" value="tag_faces"></mu-icon></mu-flex>
                <mu-flex class="flex-demo" justify-content="center" @click="toactman"><mu-icon size="48" value="group"></mu-icon></mu-flex>
                <mu-flex class="flex-demo" justify-content="center" ><mu-icon size="48" value="account_circle" @click="tojilu2"></mu-icon></mu-flex>
            </mu-flex>
            <mu-flex class="flex-wrapper-text" justify-content="center">
                <mu-flex class="flex-demo" justify-content="center" @click="toshare">新闻资讯</mu-flex>
                <mu-flex class="flex-demo" justify-content="center" >志愿阵营</mu-flex>
                <mu-flex class="flex-demo" justify-content="center" @click="toactman">我的组织</mu-flex>
                <mu-flex class="flex-demo" justify-content="center" @click="tojilu2">服务记录</mu-flex>
            </mu-flex>
        </div>
        <br>
        <mu-divider></mu-divider>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>志愿活动</span>
            <el-button @click.native="tofind" style="float: right; padding: 3px 0" type="text" >更多<i class="el-icon-d-arrow-right"></i></el-button>
          </div>
          <div>
            <table>
              <tr  v-for="(act,index) in acts" :key="index" class="text-item" @click="toDetail(index)" v-if="act.status==0">
                <td >
                  <img :src="act.pic" alt=""></td><td class="texttd">
                  {{act.title}} <br>
                  发布时间：{{act.uploadtime | formatDate}}
                </td>
              </tr>
            </table>
            <mu-divider></mu-divider>
          </div>
        </el-card>
       
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>灾区新闻</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click.native="tonews">更多<i class="el-icon-d-arrow-right"></i></el-button>
          </div>
          <div>
            <table >
              <tr class="text-item" @click="todetail">
                <td>
                  <img src="../../assets/images/10.jpg" alt="">
                </td>
                <td class="texttd">
                 印尼在地震及海啸灾区空降消毒剂 防止疾病传播
                </td>
              </tr>
              <tr class="text-item">
                <td>
                  <img src="../../assets/images/9.jpg" alt="">
                </td>
                <td class="texttd">
                 驻藏武警部队紧急驰援雅鲁藏布江堰塞湖灾区
                </td>
              </tr>
              <tr class="text-item">
                <td>
                  <img src="../../assets/images/11.jpg" alt="">
                </td>
                <td class="texttd">
                 新闻特写：日本北海道地震重灾区厚真町的避难生活
                </td>
              </tr>
              
            </table>
            <mu-divider></mu-divider>
          </div>
          <br>
        </el-card>
    </div>
</template>

<script>
import carouselImg1 from "../../assets/images/1.jpg";
import carouselImg2 from "../../assets/images/2.jpg";
import carouselImg3 from "../../assets/images/3.jpg";
import carouselImg4 from "../../assets/images/4.jpg";
import photo from "../../assets/images/sun.jpg";
import axios from "axios";
import { formatDate } from "../../date/date.js";
export default {
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    }
  },
  data() {
    return {
      carouselImg1,
      carouselImg2,
      carouselImg3,
      carouselImg4,
      photo,
      title: "Title",
      imagetitle: "imageTitle",
      active: 0,
      acts: ""
    };
  },
  methods: {
    tojilu2() {
      this.$router.push("/jilu2");
    },
    todetail() {
      this.$router.push("/share/fdetail");
    },
    tomyacts() {
      this.$router.push("/index/myacts");
    },
    toactman() {
      this.$router.push("/index/actmanage");
    },
    toDetail(index) {
      this.$router.push({
        path: "/find/detail",
        query: { id: this.acts[index]._id }
      });
    },
    toshare(){
           this.$router.push("/share");
    },
    tofind() {
      this.$router.push("/find");
    },
    tonews() {
      this.$router.push("/share");
    },
    changeActive(index) {
      this.active = index;
    }
  },
  beforeCreate() {
    axios
      .get("/api/activity/getact", {
        params: {}
      })
      .then(res => {
        this.acts = res.data.data.reverse().slice(0, 3);
      })
      .catch(err => {
        console.log(err);
      });
    axios
      .get("/api/activity/getactdetail", {
        params: {
          id: this.$route.query.id
        }
      })
      .then(res => {
        this.act = res.data.data;
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<style>
.carousel {
  width: 100%;
  height: 12rem;
}
.carousel img {
  height: 12rem;
}

.mu-card.card {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}
.cardcon.container {
  position: absolute;
  width: 100%;
}
.flex-wrapper {
  width: 100%;
  height: 56px;
  margin-top: 8px;
}
.flex-wrapper-text {
  width: 100%;
  height: 26px;
  margin-top: 8px;
}
.flex-wrapper-text .flex-demo {
  width: 25%;
  height: 20px;

  text-align: center;
  line-height: 20px;
  margin-left: 8px;
}
.flex-wrapper .flex-demo {
  width: 25%;
  height: 60px;
  text-align: center;
  line-height: 60px;
  margin-left: 20px;
  border-radius: 80%;
}
.flex-wrapper:first-child {
  margin-top: 10px;
}
.flex-demo:first-child {
  margin-left: 10px;
}
.flex-demo:last-child {
  margin-right: 10px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.text-item {
  width: 100%;
}

.box-card {
  width: 100%;
}
.text-item img {
  height: 60px;
  padding: 5px;
  height: 5rem;
  width: 8rem;
  margin-left: 0px;
}
.imgcon {
  width: 100%;
}
.el-card__body {
  padding: 1px;
}
.texttd {
  padding: 3px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: start;
}
table tr td {
  border-bottom: 1px solid #eee;
}
</style>
